<template>
    <div>
      <h2>个人资料</h2>
      <el-form :model="userInfo" label-width="120px">
        <div class="form-row">
          <el-form-item label="用户名">
            <el-input v-model="userInfo.username" disabled />
          </el-form-item>
          <el-form-item label="角色">
            <el-input v-model="roleLabel" disabled />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="手机号">
            <el-input v-model="userInfo.userphone" />
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="userInfo.sex" />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="地址">
            <el-input v-model="userInfo.useraddress" />
          </el-form-item>
          <el-form-item label="别名">
            <el-input v-model="userInfo.nickname" />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="注册时间">
            <el-input v-model="formattedCreateTime" disabled />
          </el-form-item>
          <el-form-item label="最后更新时间">
            <el-input v-model="formattedUpdateTime" disabled />
          </el-form-item>
        </div>
        <el-button type="primary" @click="updateUserInfo">确认修改</el-button>
        
        <div class="avatar-section">
          <h3>用户头像</h3>
          <el-upload
            class="avatar-uploader"
            action="/api/upload-avatar"  
            :show-file-list="false"
            :on-success="handleAvatarUploadSuccess"
            :before-upload="beforeUpload"
          >
            <img 
              :src="userInfo.userphoto && isValidImageUrl(userInfo.userphoto) ? userInfo.userphoto : defaultAvatar" 
              class="avatar" 
              alt="头像" 
            />
            <div class="avatar-uploader-icon">
              <el-icon v-if="!userInfo.userphoto"><Plus /></el-icon>
              <el-button v-if="!userInfo.userphoto">上传头像</el-button>
            </div>
          </el-upload>
        </div>
      </el-form>
    </div>
  </template>
  
  <script>
  import { userInfoService, userInfoUpdateService } from '@/api/user';
  import defaultAvatar from '@/assets/avatar/avatar.jpg';
  import { Plus } from '@element-plus/icons-vue';
  
  export default {
    data() {
      return {
        userInfo: {
          username: '',
          userphone: '',
          sex: null,
          useraddress: null,
          nickname: null,
          role: 'USER',
          createTime: '',
          updateTime: '',
          userphoto: ''
        },
        defaultAvatar
      }
    },
    computed: {
      roleLabel() {
        return this.userInfo.role === 'ADMIN' ? '管理员' : '用户';
      },
      formattedCreateTime() {
        return new Date(this.userInfo.createTime).toLocaleString();
      },
      formattedUpdateTime() {
        return new Date(this.userInfo.updateTime).toLocaleString();
      }
    },
    created() {
      this.fetchUserInfo();
    },
    methods: {
      async fetchUserInfo() {
        const response = await userInfoService();
        this.userInfo = response.data;
      },
      async updateUserInfo() {
        await userInfoUpdateService(this.userInfo);
        this.$message.success('个人信息更新成功');
      },
      handleAvatarUploadSuccess(response) {
        this.userInfo.userphoto = response.data.url; 
        this.$message.success('头像上传成功');
      },
      beforeUpload(file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isJpgOrPng) {
          this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
        }
        if (!isLt5M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        return isJpgOrPng && isLt5M;
      },
      isValidImageUrl(url) {
        return typeof url === 'string' && (url.startsWith('http://') || url.startsWith('https://'));
      }
    }
  }
  </script>
  
  <style scoped>
  .form-row {
    display: flex;
  }
  .form-row .el-form-item {
    flex: 1;
    margin-right: 20px;
  }
  .form-row .el-form-item:last-child {
    margin-right: 0;
  }
  .avatar-section {
    margin-top: 20px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
  }
  .avatar-uploader {
    display: inline-block;
    cursor: pointer;
  }
  .avatar-uploader-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
  }
  </style>
  